@import 'shared';

:local(.tip-root) {
  @extend %tip-bubble;

  bottom: 80px;

  width: auto;
  padding: 4px 24px 4px 12px;

  @media(max-width: 768px) {
    left: 50%;
    width: 80%;
    -webkit-transform: auto;
    transform: auto;
  }

  :local(.tip-cancel) {
    color: $notice-widget-color;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    border: none;
    outline-style: none;
    width: 32px;
    height: 32px;
    margin-right: 2px;
  }

  :local(.tip) {
    flex: 10;
  }

  :local(.split-tip) {
    flex: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    :local(.split-tip-icon) {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      outline-style: none;
      width: 28px;
      height: 28px;
      background-size: 30px;
      background-position: center;
      background-repeat: no-repeat;
      border: 2px solid white;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: flex-start;
      cursor: pointer;
      margin: 0 6px;
      border-radius: 18px;
      background-color: $action-color;
    }

    :local(.spawn_menu-icon) {
      background-image: url(../images/spawn_message.png);
    }

    :local(.object_rotate_button-icon) {
      background-image: url(../images/rotate.png);
    }

    :local(.object_scale_button-icon) {
      background-image: url(../images/scale.png);
    }

    :local(.object_recenter_button-icon) {
      background-image: url(../images/recenter.png);
    }
  }

  :local(.tip-link) {
    @extend %link-button;
    color: $notice-text-color;
  }
}

:local(.tour-tip-root) {
  @media(min-height: 700px) {
    bottom: 20vh;
  }

  @media(min-height: 800px) {
    bottom: 25vh;
  }
}
